<style scoped lang="scss">
.box {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.top {
    width: 100%;
    background-color: #fff;
    // margin: 10px;
    padding: 10px;
    font-weight: 900;

    .com {
        display: flex;
        flex-wrap: wrap;

        img {
            width: 106px;
            height: 65px;
            margin-left: 2px;
        }
    }

    #penson {
        width: 100px;
        height: 60px;
        border: 1px dashed #ccc;
        margin: 2px 5px;
        border-radius: 5px;
    }

    .active {
        background-color: rgb(190, 236, 254);
        border: 2px solid blue;
        color: #fff;
    }

}

main {
    overflow-y: scroll;
    height: calc(100vh - 140px);
    background: #fff;
}

.ptitle {
    height: 50px;
    border-bottom: 0.5px solid rgb(236, 236, 236);
    background: #fff;
    border-top: 0.5px solid rgb(236, 236, 236);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 14px;

    p:nth-child(1) {
        font-weight: 600;
    }

    p:nth-child(2) {
        color: #ccc;

        span {
            padding: 10px;
        }
    }
}

.divTime1 {
    display: flex;
    height: 43px;
    border-bottom: 1px solid rgb(236, 236, 236);
    padding: 0 10px;
}

.divTime {
    display: flex;
    border-bottom: 1px solid rgb(236, 236, 236);
    justify-content: space-between;
    height: 50px;
    font-size: 14px;
    align-items: center;
    // padding: 0 20px;
    margin: 0 16px;

    input {
        border: none;
        font-size: 12px;
        text-align: right;
    }
}

.TabBox {
    display: flex;
    flex-direction: column;

    .TanP {
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        border-bottom: 1px solid rgb(236, 236, 236);

        p {
            padding: 0 10px;
        }
    }

    .divShuo {
        height: 50px;
        display: flex;
        flex-direction: column;
        padding: 10px;
        color: #ccc;
        border-bottom: 1px solid rgb(236, 236, 236);
        border-top: 1px solid rgb(236, 236, 236);

    }

    .TanFooter {
        margin-bottom: 100px;
        display: flex;
        justify-content: space-between;
        line-height: 30px;
        margin-top: 20px;

        button {
            width: 45vw;
            margin: 0 10px;
            border-radius: 10px;
            height: 40px;
            background: none;
            border: 0.5px solid #ccc;
        }

        button:last-child {
            background-color: rgb(30, 111, 255);
            color: #fff;
            height: 40px;
        }
    }
}

.cheButton {
    width: 100vw;
    text-align: right;
    display: flex;
    line-height: 20px;

    .checkbox {
        margin-left: 20px;
        font-size: 14px;

        span {
            color: rgb(30, 111, 255);
        }
    }
}

footer {
    width: 100%;
    height: 70px;
    position: fixed;
    z-index: 10;
    bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
</style>
<template>
    <div class="box">
        <van-nav-bar title="复诊开方申请" left-arrow @click-left="onLeft" />
        <main>
            <div class="top">
                <van-cell style="font-size: 16px;" title="选中就诊人" required />
                <div class="com">
                    <div id="penson" :class="{ active: actives === v.id }" v-for="(v, i) in listData" :key="i"
                        ref="active" @click="onPerson(v)">
                        <p style="font-size: 15px;text-align: center;line-height: 27px;"> {{ v.username }} </p>
                        <p style="font-size: 14px;text-align: center;line-height: 27px;">{{ v.userage }}
                            岁&emsp;{{ v.usersex }} </p>
                    </div>
                    <img @click="$router.push('/patients')" src="../../../../../assets/fu1.png" alt="">
                </div>
            </div>
            <div class="ptitle">
                <p>首诊信息确认</p>
                <p @click="onClickOverlay">
                    <sapn v-if="faly">
                        未填写
                    </sapn>
                    <sapn v-else>
                        已填写
                    </sapn>
                    <span>></span>
                </p>
            </div>
        </main>
        <div class="cheButton">
            <van-checkbox class="checkbox" v-model="checked">我已阅读并同意<span>《风险告知及患者知情同意书》</span></van-checkbox>
        </div>
        <footer v-if="onok">
            <van-button type="primary" block @click="onsubmit1">提交</van-button>
        </footer>
        <footer v-else>
            <van-button type="primary" block disabled>提交</van-button>
        </footer>

        <!-- 弹框 -->
        <van-action-sheet v-model:show="show" position="bottom" title="填写线下医疗机构首诊信息">
            <van-form @submit="onSubmit">
                <div class="TabBox">
                    <div class="divShuo">
                        <span>说明:根据政策要求,您需要填写问诊人首诊信息</span>
                    </div>
                    <div class="divTime1">
                        <van-field v-model="result" required is-link readonly name="result" label="时间选择"
                            label-width="200px" style="text-align: right;" placeholder="点击选择时间"
                            @click="showPicker = true" />
                        <van-popup v-model:show="showPicker" position="bottom">
                            <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
                        </van-popup>
                    </div>
                    <div class="divTime1">
                        <van-field v-model="text1" required type="text" name="text1" label="首诊机构" label-width="150px"
                            placeholder="请输入首诊医疗机构名称" />
                    </div>
                    <div class="divTime1">
                        <van-field v-model="text2" required type="text" name="text2" label="首诊诊断" label-width="150px"
                            placeholder="请输入首诊诊断疾病名称" />
                    </div>
                    <div style="margin: 16px;display: flex; margin-bottom: 100px;">
                        <van-button round block type='default'>取消</van-button>
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </div>
            </van-form>
        </van-action-sheet>
    </div>
</template>
<script setup lang="ts">
// @ts-ignore
import router from '@/router';
import axios from 'axios'
import { showConfirmDialog } from 'vant';
import { ref } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
const listId = ref(route.query.id as string | undefined);
interface User {
    id: number,
    username: string,
    usersex: string,
    userphone: string,
    userbirthday: string
    userstanding: string,
    userage: number
}
const onok = ref(false)
// 就诊人的选择高亮
const actives = ref(0)
// 搜索列表变量
const listData = ref<User[]>([])
const show = ref(false);

const onClickOverlay = () => {
    show.value = true;
};

const getUser = async () => {
    const res = await axios.get('/api/user/list')
    listData.value = res.data.data
}

// 选择就诊人
const onPerson = (v: User) => {
    actives.value = v.id
    onok.value = true
}
// 时间选泽
const result = ref('');
const showPicker = ref(false);

const onConfirm =({ selectedValues }: { selectedValues: string[] }) => {
    result.value = selectedValues.join('/');
    showPicker.value = false;
}
// 首诊一些信息
const text1 = ref('');
const text2 = ref('');
const faly = ref(true);
// 点击确定
const onSubmit = () => {
    if (text1.value == '' && text2.value == '' && result.value == '') {
        alert('请填写完整信息')
    } else {
        if (text1.value.length >= 2 && text2.value.length >= 2 && result.value.length >= 2) {
            show.value = false
            faly.value = false
        } else {
            alert('确定信息')

        }
    };
}
// 复选框
const checked = ref(false);
getUser()
// 点击确定
const onsubmit1 = () => {
    if (checked.value == true) {
    } else {
        showConfirmDialog({
            title: '是否勾选',
            message:
                '请购风险告知及患者知情同意书',
        })
            .then(() => {
                checked.value = true
            })
    }
    router.push('/imgZhiFu?id=' + listId.value)
}
// 向左跳转
const onLeft = () => {
    showConfirmDialog({
        title: '退出',
        message:
            '确定要返回上一个页面吗？',
    })
        .then(() => {
            router.go(-1)
        })
}
</script>